<template>
	<el-dialog v-model="showModal" class="peak-dialog" :close-on-click-modal="false" :title="title" :width="900">
		<el-form ref="paramsFormRef" class="params-form" :inline="true" label-position="right" label-width="100px" :model="paramsForm" :rules="paramsRules">
			<el-row :gutter="16" justify="start">
				<el-col v-if="addStatus" :span="12">
					<el-form-item class="form-item" label="上级菜单:" prop="parentId">
						<el-cascader v-model="paramsForm.parentId" class="el-form-item" :options="options" placeholder="请选择上级菜单" :props="{ expandTrigger: 'click', emitPath: false, checkStrictly: true, label: 'menuName', value: 'menuId' }" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="form-item" label="菜单名称:" prop="menuName">
						<el-input v-model="paramsForm.menuName" placeholder="请输入菜单名称" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="form-item" label="菜单类型:" prop="menuType">
						<el-radio-group v-model="paramsForm.menuType">
							<el-radio v-if="menuTypeStatus" :label="'D'">目录</el-radio>
							<el-radio :value="'N'">菜单</el-radio>
							<el-radio :value="'B'">按钮</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="form-item" label="菜单图标:" prop="icon">
						<el-input v-model="paramsForm.icon" placeholder="请输入菜单图标" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="form-item" label="显示顺序:" prop="orderNum">
						<el-input-number v-model="paramsForm.orderNum" class="el-form-item" controls-position="right" :max="50" :min="1" placeholder="请输入显示顺序" :step-strictly="true" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="form-item" label="访问路径:" prop="path">
						<el-input v-model="paramsForm.path" placeholder="请输访问路径" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="form-item" label="组件路径:" prop="component">
						<el-input v-model="paramsForm.component" placeholder="请输入组件路径" />
					</el-form-item>
				</el-col>
				<!-- <el-col v-show="paramsForm.menuType == 'M' || paramsForm.menuType == 'C'" :span="12">
					<el-form-item class="form-item" label="是否推荐:" prop="isRecommend">
						<el-radio-group v-model="paramsForm.isRecommend">
							<el-radio :value="'1'">是</el-radio>
							<el-radio :value="'0'">否</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col> -->
				<!-- <el-col v-show="paramsForm.menuType == 'C'" :span="12">
					<el-form-item class="form-item" label="是否展示:" prop="isShow">
						<el-radio-group v-model="paramsForm.isShow">
							<el-radio :value="'1'">是</el-radio>
							<el-radio :value="'0'">否</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col> -->
				<el-col v-show="paramsForm.menuType == 'N'" :span="12">
					<el-form-item class="form-item" label="是否展示:" prop="visible">
						<el-radio-group v-model="paramsForm.visible">
							<el-radio :value="'0'">显示</el-radio>
							<el-radio :value="'1'">隐藏</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col v-show="paramsForm.menuType == 'N'" :span="12">
					<el-form-item class="form-item" label="菜单状态:" prop="status">
						<el-radio-group v-model="paramsForm.status">
							<el-radio :value="'0'">正常</el-radio>
							<el-radio :value="'1'">停用</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col v-show="paramsForm.menuType == 'N' || paramsForm.menuType == 'B'" :span="12">
					<el-form-item class="form-item" label="是否缓存:" prop="isCache">
						<el-radio-group v-model="paramsForm.isCache">
							<el-radio :value="'0'">缓存</el-radio>
							<el-radio :value="'1'">否</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col v-show="paramsForm.menuType != 'D'" :span="24">
					<el-form-item class="form-item" label="权限标识:" prop="perms">
						<el-input v-model="paramsForm.perms" rows="3" type="textarea" />
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item class="form-item" label="备注信息:" prop="remark">
						<el-input v-model="paramsForm.remark" rows="3" type="textarea" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="handleCancel">取 消</el-button>
				<el-button type="primary" @click="handleSure" v-throttle>确 定</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script name="EditMenuModal" setup>
import global from '@/utils/global'
import { treeUtil } from '@meta/utils'

/*
 *@Description: 状态初始化
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-08-24 10:43:48
 */
const emit = defineEmits(['peak-modal-ok'])

const state = reactive({
	showModal: false,
	title: '',
	paramsFormRef: null,
	paramsForm: {
		menuId: '',
		parentId: '',
		menuName: '',
		icon: '',
		path: '',
		component: '',
		perms: '',
		menuType: 'D', // 菜单类型（M模块 D目录 N菜单 B按钮
		menuPlatform: 'PC',
		orderNum: 1,
		isCache: '1', //是否缓存 0 是 1 否
		isFrame: '1', // 是否为外链（0是 1否）
		visible: '0', //显示状态（0显示 1隐藏）
		status: '0', //菜单状态（0显示 1隐藏）
		remark: '',
		isRecommend: '0',
		isShow: '1',
	},
	options: [],
	paramsRules: {
		parentId: [{ required: true, message: '请选择上级菜单', trigger: 'blur' }],
		menuName: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
	},
	addStatus: true,
	menuTypeStatus: true,
})
const { showModal, title, paramsFormRef, paramsForm, paramsRules, options, addStatus, menuTypeStatus } = toRefs(state)
/*
 *@Description: 方法模块
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-08-24 10:46:23
 */
const handleSure = () => {
	state.paramsFormRef.validate(valid => {
		if (valid) {
			handleSureOk()
		} else {
			return false
		}
	})
}
const handleSureOk = () => {
	//如果是按钮 默认不显示
	if (state.paramsForm.menuType == 'B') {
		state.paramsForm.visible = '1'
	}
	if (state.paramsForm.menuId) {
		//编辑
		global.$fetchPostData(`/meta-system/web/v1/sysMenu/editMenu`, state.paramsForm).then(data => {
			if (data.code == 200) {
				state.showModal = false
				emit('peak-modal-ok', 2)
			} else {
				global.$baseMessage(data.msg, 'error')
			}
		})
	} else {
		global.$fetchPostData(`/meta-system/web/v1/sysMenu/addMenu`, state.paramsForm).then(data => {
			if (data.code == 200) {
				state.showModal = false
				emit('peak-modal-ok', 1)
			} else {
				global.$baseMessage(data.msg, 'error')
			}
		})
	}
}
const handleCancel = () => {
	state.showModal = false
}
const handleShowModal = async row => {
	state.showModal = true
	await nextTick()
	state.paramsForm.menuId = ''
	state.paramsFormRef.resetFields()
	if (row.flag == 'add') {
		// 新增父级菜单
		state.title = '新增菜单'
		state.paramsFormRef.resetFields()
		state.paramsForm.parentId = ''
		state.paramsForm.menuPlatform = row.menuPlatform
		state.addStatus = true
		state.menuTypeStatus = true
		getParentMenu()
	} else if (row.flag == 'child') {
		state.paramsFormRef.resetFields()
		// 新增子级菜单
		state.title = '新增子级菜单'
		state.paramsForm.parentId = row.menuId
		state.paramsForm.menuPlatform = row.menuPlatform
		state.addStatus = false
		state.paramsForm.menuType = 'N'
		state.menuTypeStatus = false
		getParentMenu()
	} else {
		state.paramsFormRef.resetFields()
		// 编辑菜单
		state.title = '编辑菜单'
		state.addStatus = false
		state.menuTypeStatus = true
		getDataDetail(row.menuId)
	}
}
const getDataDetail = menuId => {
	global
		.$fetchPostData(`/meta-system/web/v1/sysMenu/details`, {
			idStr: menuId,
		})
		.then(data => {
			if (data.code == 200) {
				state.paramsForm = data.data || {}
				state.paramsForm.orderNum = Number(data.data.orderNum)
			} else {
				global.$baseMessage(data.msg, 'error')
			}
		})
}
const getParentMenu = () => {
	global.$fetchPostData(`/meta-system/web/v1/sysMenu/menuCascade`, { menuPlatform: state.paramsForm.menuPlatform }).then(data => {
		if (data.code == 200) {
			state.options = treeUtil.handleTree(data.data, 'menuId')
		} else {
			global.$baseMessage(data.msg, 'error')
		}
	})
}
defineExpose({
	handleShowModal,
})
</script>
<style lang="scss" scoped></style>
